<template>
  <div>
    <el-card class="box-card">
      <labor @addChange="addChange"></labor>
      <myTable
        :loading="loading"
        :tableList="tableList"
        @statusChange="statusChanges"
        @edit="addChange(2, $event)"
        @del="del"
      ></myTable>
    </el-card>
    <my-form ref="form" :parentList="parentList"></my-form>
  </div>
</template>

<script>
import labor from "./table/labor"
import myTable from "./table"
import myForm from "./form"
import {
  list,
  statusChange,
  detail,
  parentList,
  destroy,
} from "@/api/productCategory"
export default {
  components: { myTable, labor, myForm },
  data() {
    return {
      loading: true,
      tableList: [],
      total: 0,
      parentList: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await list()
        this.loading = false
        this.tableList = data
        this.total = data.total
      } catch (ex) {
        this.loading = false
        this.$msg.errorMsg(ex.message)
      }
    },
    // 获取商品分类详情
    async getDetail(type, { id }) {
      try {
        const { data } = await detail({ id })
        this.$refs.form.show(type, data)
      } catch (ex) {
        console.log(ex, "error")
      }
    },
    // 获取商品分类一级分类
    async getParentList() {
      try {
        const { data } = await parentList()
        this.parentList = data
      } catch (ex) {
        console.log(ex, "error")
      }
    },
    // 更改状态
    async statusChanges(e) {
      try {
        const data = await statusChange({
          id: e.id,
          status: e.status,
        })
        this.$msg.successMsg(data.msg)
      } catch (ex) {
        console.log(ex)
      }
    },
    // 添加/修改弹框
    addChange(type, e) {
      this.getParentList()
      if (type == 1) {
        this.$refs.form.show(type, e)
      }
      if (type == 2) {
        this.getDetail(type, e)
      }
    },
    // 删除
    del({ id }) {
      const that = this
      that.$msg.massageConfirm("是否删除当前项？", async function () {
        try {
          const data = await destroy({ ids: id })
          that.$msg.successMsg(data.msg)
          that.getList()
        } catch (ex) {
          console.log(ex)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
